<template>
    <div>
        <div id="warehouse_receipt_evaluation" :style="{height: height, width: width}"></div>
    </div>
</template>

<script>
    import echarts from 'echarts';

    export default {
        name: "warehouse_receipt_evaluation",
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: (650/3840*100) + 'vw'
            },
            height: {
                type: String,
                // default: 'calc(100vh - 164px)'
                default: (650/2160*100) + 'vh'
            },
            chartData: {}
        },
        data() {
            return {

            }
        },
        mounted() {
            setTimeout(() => {
                this.initMap();
            }, 1024)
        },
        methods: {

            initMap() {
                let _this = this;
                let radar_indicator = [];
                let series_data = [];
                for (let i = 0; i < _this.chartData.length; i++) {
                    let item = {}
                    item.name = _this.chartData[i].dimensionLabel;
                    item.max = 1;
                    series_data.push(_this.chartData[i].ratingValue);
                    _this.chartData[i].ratingValue ? item.color = '#ff0002' : item.color = '#ffffff'
                    radar_indicator.push(item)
                }

                let option = {
                    title: {
                        // text: '基础雷达图'
                    },
                    tooltip: {},
                    radar: {
                        // shape: 'circle',
                        splitNumber: 5,
                        name: {
                            textStyle: {
                                color: '#fff',
                                /*fontSize: (70/3840*100) + 'vw'*/
                                fontSize: 680/3840*100
                            }
                        },
                        indicator: radar_indicator,

                        center: ['46.8%', '50%'],
                        radius: 65+'%',
                        splitArea: {
                            areaStyle: {
                                color: [
                                    '#003e6a', '#004676'
                                ]
                            }
                        },
                    },

                    series: [{
                        name: '风险评估',
                        type: 'radar',
                        areaStyle: {
                            normal: {
                                color: 'rgba(135, 222, 207, 0.32)'
                            },
                        },

                        symbolSize: 0,
                        lineStyle: {
                            width: 3,
                            color: '#bb1a06',
                        },
                        data: [{
                            value: series_data
                        }]
                    }]
                };

                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('warehouse_receipt_evaluation'));
                myChart.setOption(option);

            }
        }
    }
</script>

<style scoped lang="scss">

</style>